<template>
	<view class="fixed-container" :style="{height: height+'px'}">
		<view class="fixed">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: ['update'],
	data() {
		return {
			height: 20, // 高度
		};
	},
	mounted() {
		this.updateHeight();
	},
	watch: {
		update(n, o) {
			this.updateHeight();
		}
	},
	methods: {
		updateHeight() {
			uni  
			  .createSelectorQuery().in(this).select(".fixed")
			  .boundingClientRect((data) => {
				  this.height = data.height;
			  }).exec();
		}
	}
}
</script>

<style lang="scss" scoped>
	.fixed-container {
		width: 100%;
		z-index: 1000;
		.fixed {
			position: fixed;
			top: var(--window-top);
			left: 0;
			width: 100%;
			z-index: 1000;
		}
	}
</style>
